<template>
    <div class="home_right ">
        <div class="user_model box_animation_l"
             :style="{
            'background': $store.state.nowTime==='moon' ? '#262525' : '#fff',
             'box-shadow': $store.state.nowTime==='moon' ?
                           '0 1px 1px 0 #fff, 0 2px 10px 0 #fff' :
                           '0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19)',}">
            <div class="user"
                 v-if="content"
                 :style="{'background':'url('+content.avatar +')',}">
                <div style="background: rgba(21,20,20,0.4)">
                    <img :src="content.avatar" alt="" class="user_img"> <br>
                    <router-link to="/personalInformation">{{ content.username }}</router-link>
                    <p class="motto">{{ content.motto }} </p>
                    <Statistics></Statistics>
                    <Contact></Contact>
                    <UserArticleContent
                            :essay="essay"
                            :nowWid="nowWid"
                            :title_color="'#f17e58'"
                            :titleLi_color="'#fffcfc'"
                            :title_img="title_background"
                            :content_img="'/img/common/lianjie.png'">最近文章
                    </UserArticleContent>
                </div>
            </div>

        </div>
    </div>

</template>

<script>
import Contact from "@/components/home/Contact.vue";
import Statistics from "@/components/home/Statistics.vue";
import SiteInformation from "@/components/PublicComponents/SiteInformation.vue";
import RecentArticles from "@/components/home/RecentArticles.vue";
import Countdown from "@/components/home/Countdown.vue";
import api from "@/api";
import UserArticleTitle from "@/components/home/UserArticleTitle.vue";
import UserArticleContent from "@/components/home/UserArticleContent.vue";
import CommentReplies from "@/components/detail/CommentReplies.vue";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";

export default {
    name: "UserInformation",
    components: {
        CircleLoading,
        CommentReplies,
        UserArticleContent,
        UserArticleTitle, Countdown, RecentArticles, SiteInformation, Statistics, Contact,
    },
    props: {
        content: Object,
        nowWid: String, Number,
    },
    data() {
        return {
            essay: "",
            title_background: "/img/common/zuijin.png",
            skeleton: false,
        }
    },
    mounted() {
        setTimeout(() => {
            let articleDetails = JSON.parse(window.localStorage.getItem("ArticleDetails"))
            if (articleDetails)
                api.saveUserFives(articleDetails.uid).then((res) => {
                    this.essay = res.data.data;
                })
        }, 100)

        setTimeout(() => {
            this.skeleton = true
        }, 300)
    },

    methods: {}

}
</script>

<style scoped>
.circle_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius: 5px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: rgba(246, 247, 248, 0.7);
}

@keyframes gradients {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes gradient {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.home_right {
    width: 16vw;
    min-width: 250px;
    margin-left: 1rem;
    color: white !important;
    animation: gradient .5s ease-in-out 0s 1 forwards;
}

.home_right ul li {
    list-style: none;
    width: 100%
}

.user {
    text-align: center;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border-radius: 5px;
}

.user .user_img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    margin-top: 10vh;
    object-fit: cover;
    box-shadow: 0 1px 1px 0 rgba(248, 245, 245, 1), 0 6px 20px 0 rgba(253, 252, 252, 0.9);
}

.user .user_img:hover {
    animation: rotates 1.5s;
}

.home_right .user a {
    color: #f1f4f6;
}

.home_right .user a:hover {
    text-decoration: underline;
}

@keyframes rotates {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}

.motto {
    font-size: 14px;
    margin-top: 5px;
    width: calc(100% - 10px);
    padding: 0 5px ;
}


@media (min-width: 0px) and (max-width: 760px) {
    .home_right {
        display: none;
    }

    .dis {
        display: none;
    }

}

.user_model {
    padding: 10px 10px;
    border-radius: 5px
}
</style>